<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers GeoJSON Reprojected Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <style type="text/css">
    .olControlAttribution {
        left: 2px;
        right: inherit;
        bottom: 3px;
        line-height: 11px;
    }
    </style>
  </head>
  <body>
    <h1 id="title">GeoJSON Reprojected</h1>

    <div id="tags">
        geojson, bing, projection
    </div>

    <div id="shortdesc">Display GeoJSON data over Bing tiles</div>

    <div id="map" class="smallmap"></div>

    <div id="docs">
        <p>This example demonstrates the use of GeoJSON over Bing tiles.  The
        GeoJSON vector data is in geographic coordinates (EPSG:4326).  The Bing
        tiles are in a spherical mercator projection (EPSG:900913).  By setting
        the <code>projection</code> property of the GeoJSON layer to the source
        projection (EPSG:4326), the features are properly displayed over the
        base layer.  In general, the map projection determines how raster or
        vector data is displayed.  The layer projection corresponds to the
        projection of the data source.
        <p>See the
        <a target="_blank" href="geojson-reprojected.js">geojson-reprojected.js</a>
        source for details on how this is done.</p>
    </div>
    <script src="../lib/OpenLayers.js"></script>
    <script src="geojson-reprojected.js"></script>
  </body>
</html>
